<template>
    <div class="container">
        <el-row>
            <el-col :span="6">
                <div>&nbsp;</div>
            </el-col>
            <el-col :span="12">
                <div class="bg-center">
                    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                        <h2>Boot电商后台登录</h2>
                        <!-- 用户名 -->
                        <el-row>
                            <el-col :span="6">&nbsp;</el-col>
                            <el-col :span="12">
                                <el-form-item label="用户" prop="username">
                                    <el-input
                                        prefix-icon="el-icon-user"
                                        v-model="form.username"
                                        placeholder="请输入用户名"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">&nbsp;</el-col>
                        </el-row>

                        <!-- 密码 -->
                        <el-row>
                            <el-col :span="6">&nbsp;</el-col>
                            <el-col :span="12">
                                <el-form-item label="密码">
                                    <el-input
                                        prefix-icon="el-icon-lock"
                                        v-model="form.password"
                                        type="password"
                                        placeholder="请输入密码"
                                    />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">&nbsp;</el-col>
                        </el-row>

                        <!-- 登录按钮 -->
                        <el-row>
                            <el-col :span="2">&nbsp;</el-col>
                            <el-col :span="16">
                                <el-button type="primary" @click="login">登录</el-button>
                            </el-col>
                            <el-col :span="6">&nbsp;</el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-col>
            <el-col :span="6">
                <div>&nbsp;</div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { login } from "@/api/admin/admin.js";

export default {
    created() {
        var _self = this;

        document.onkeydown = function() {
            var key = window.event.keyCode;

            if (key === 13) {
                _self.login();
            }
        };
    },
    data() {
        return {
            form: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" }
                ]
            }
        };
    },
    methods: {
        login() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    let router = this.$router;
                    console.log(router);
                    let data = {
                        username: this.form.username,
                        password: this.form.password
                    };
                    login(data).then(response => {
                        console.log(response);
                        if (response.data.code === 0) {
                            //登录成功 将token写入localstorage
                            localStorage.setItem("JWT_TOKEN", response.data.data);
                            router.push("/admin/admin");
                        }
                        alert(response.data.msg);
                    });
                    // axios.post('http://localhost:8888/admin/login', {
                    //     username: this.form.username,
                    //     password: this.form.password
                    // }).then(function(response){
                    //     console.log(response)
                    //     if(response.data.code == 0){
                    //         router.push('/home');
                    //     }else{
                    //         alert(response.data.msg);
                    //     }
                    // })
                }
            });
        }
    }
};
</script>
<style scoped>
.container {
    margin-top: 100px;
}
</style>